{% extends "base.html" %}
{% block title %}点名{% endblock %}
{% block head %}
    {{ super() }}
<script>
function initVM(data) {
    var vm = new Vue({
        el: '#div-kids',
        data: {
            kids:data.kids,
			class_select:'',		
             },
		
        methods: {
		    reload:function(){
				getJSON('/api/rollcall', {
					class_select: this.class_select,
				}, function (err, results) {
					if (err) {
						return fatal(err);
					}
           			vm.kids=results.kids;			
				});
		    },
			submit:function(){			    
			    var kids_notbe=[]
			    for (i=0;i<this.kids.length;i++){
				    if (!this.kids[i].be){
					    kids_notbe.push(this.kids[i].id)}				
				};
				if (kids_notbe.length==0){
				   if(!confirm('确定没有缺勤的孩子？')){
				       return;
				   }   
				}
				else{
				if(!confirm('确定此次点名？')){
				       return;
					}
				}		
				
				postJSON('/api/attendance/add',{
					kids_notbe:kids_notbe,
					class_select:this.class_select,
					date:'',
				}, function (err, r) {
					if (err) {
						return alert(err.message || err.error || err);
					}
					else {
						return location.assign('/rollcall');
					}
				});
				
            },
			
        },
    });
}
$(function() {
	getJSON('/api/rollcall', {
		class_select: class_select,
	}, function (err, results) {
		if (err) {
			return fatal(err);
		}
		initVM(results);
		x=document.getElementById("class_select");
		classes=results.k_classes
		for(var i=0;i<classes.length;i++){
			v = classes[i].id; //value
			name = classes[i].name;
			opt = new Option(name,v); 
			x.options.add(opt);
			}
	});
	});
      
</script>
{% endblock %}

{%block panel%}
<div class="tm-panel  uk-panel uk-panel-box  ">                        
	<div class="uk-panel-title">幼儿管理</div>
	<div class="uk-panel-li"><a href="/kids/add">幼儿入园</a></div> 
	<div class="line"></div>
	<div class="uk-panel-li"><a href="/kids">幼儿信息列表</a></div>
	<div class="line"></div>
	<div class="uk-panel-li"><a href="/kid">幼儿详细信息</a></div>
	<div class="line"></div>	
	<br>
	<div class="uk-panel-li"><a href="/rollcall">点名</a></div> 
	<div class="line"></div>
	<div class="uk-panel-li"><a href="/rollcall/modify">点名信息修改</a></div> 
	<div class="line"></div>	
	<div class="uk-panel-li"><a href="/attendance">考勤信息</a></div>
	<div class="line"></div>
	<br>

</div>
{%endblock%}
					
{% block content %}
<div class="tit"><a href="/">主页 </a>  》 <a href="">幼儿日常管理 </a></div>

<div id="div-kids" class="div-pagemain" >		


	<form  class="uk-form uk-form-stacked ">
	<div class="uk-grid">
	<div class="uk-width-1-4">
	<div class="uk-form-row ">
			<label class="uk-form-label">班级名称:</label>
			<div class="uk-form-controls  uk-form-controls-text">
				<select v-model="class_select" id="class_select" v-on="change:reload()">
					<option value=""></option>
				</select>
		</div>
	</div>	
	</div>

	</div>
	</form>
<hr>
	
	<div class="divmain-title">点名</div>		
	<div class="divcontainer">
		
		<div class="uk-grid uk-grid-width-medium-1-4 uk-grid-width-small-1-3 uk-grid-divider" data-uk-grid-margin >


		<div v-repeat="kid:kids" v-on="click: kid.be = !kid.be">
		<div class="uk-panel uk-panel-box " style="padding:0px;margin-bottom:30px">
		    <div class="uk-grid uk-grid-collapse "> 
			<div class="uk-width-3-4 "><div class="rollcall_name " v-text="kid.name"></div></div>
			<div class="uk-width-1-4 "><div v-if="kid.be" class="rollcall-be uk-text-middle">出<br>勤</div><div v-if="!kid.be" class="rollcall-notbe">缺<br>勤</div></div>
			</div>
			</div>
		</div>

	</ul>

	
 </div>
	
	
	
     <div class="divbutton">
        <button type="submit" class="uk-button uk-button-primary" v-on="click: submit()"><i class=""></i>保存</button>
    </div>
     </div>
 </div>
{%endblock%}
             